<template>
  <div class="context-menu-component menu-container" ref="menuRef">
    <ul class="ant-menu-light ant-menu-root ant-menu ant-menu-vertical">
      <li v-for="(action, index) in actions" :key="index" @click="action.action(componentId)" class="ant-menu-item">
        <span class="item-text">{{action.text}}</span>
        <span class="item-shortcut">{{action.shortcut}}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, onUnmounted, PropType } from 'vue'
import { getParentElement } from '../helper'
import { ActionItem } from './createContextMenu'

export default defineComponent({
  props: {
    actions: {
      type: Array as PropType<ActionItem[]>,
      required: true
    },
    triggerClass: {
      type: String,
      default: 'edit-wrapper'
    }
  },
  setup (props, context) {
    const menuRef = ref<HTMLElement | null>(null)
    const componentId = ref('')
    const triggerContextMenu = (e: MouseEvent) => {
      const domElement = menuRef.value as HTMLElement
      const wrapperElement = getParentElement(e.target as HTMLElement, props.triggerClass)
      if (wrapperElement) {
        e.preventDefault()
        domElement.style.display = 'block'
        domElement.style.top = e.pageY + 'px'
        domElement.style.left = e.pageX + 'px'
        const cid = wrapperElement.dataset.componentId
        console.log(cid)
        if (cid) {
          componentId.value = cid
        }
      }
    }
    const handleClick = () => {
      const domElement = menuRef.value as HTMLElement
      domElement.style.display = 'none'
    }
    onMounted(() => {
      document.addEventListener('contextmenu', triggerContextMenu)
      document.addEventListener('click', handleClick)
    })

    onUnmounted(() => {
      console.log('removed')
      document.removeEventListener('contextmenu', triggerContextMenu)
      document.removeEventListener('click', handleClick)
    })
    return {
      menuRef,
      componentId
    }
  }
})
</script>

<style>
.menu-container {
  display: none;
  position: absolute;
  background: #fff;
  z-index: 2000;
  width: 220px; 
  border: 1px solid #ccc;
}
.menu-container .ant-menu-item {
  display: flex;
  justify-content: space-between;
}
.menu-container .ant-menu-item:hover {
  background: #efefef;
}
.ant-menu-item .item-shortcut {
  color: #ccc;
}
</style>
